<div class="wrapper">
  <h2>
    {{ 'Password Change Required' | translate }}
  </h2>

  <div class="container">
    <mat-card [class.step-finished]="wasRequiredPasswordChanged()">
      <mat-toolbar-row>
        <h3>{{ 'Set New Password' | translate }}</h3>
      </mat-toolbar-row>

      <ix-change-password-form
        (passwordUpdated)="passwordChanged()"
      ></ix-change-password-form>
    </mat-card>
  </div>

  @if (wasRequiredPasswordChanged()) {
    <button
      mat-button
      color="primary"
      matDialogClose
      ixTest="finish-required-change-password-step"
    >
      {{ 'Finish' | translate }}
    </button>
  } @else {
    <button
      mat-button
      ixTest="required-change-password-log-out"
      (click)="logOut()"
    >
      {{ 'Log Out' | translate }}
    </button>
  }
</div>
